<template>
    <el-dialog :before-close="handleClose" :show-close="false" :visible.sync="visible" width="35%">
        <div class="font-16 weight-bold color-333">添加银行卡</div>
        <div class="mt-30 pr-40 pl-40">
            <el-form :model="ruleForm" :rules="rules" class="demo-ruleForm" label-width="100px" ref="ruleForm">
                <el-form-item label="持卡人">
                    <el-input placeholder="请先实名认证" readonly="readonly" size="small" v-model="my_cert.cert_name"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input placeholder="请先实名认证" readonly size="small" v-model="my_cert.cert_no"></el-input>
                </el-form-item>
                <el-form-item label="所属银行" prop="bank_code">
                    <el-select clearable placeholder="请选择所属银行" size="small" v-model="ruleForm.bank_code">
                        <el-option :key="index" :label="item.name" :value="item.bank_code" v-for="(item,index) in banks"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="银行卡号" prop="card_number">
                    <el-input placeholder="请输入银行卡号" size="small" v-model="ruleForm.card_number"></el-input>
                </el-form-item>
                <el-form-item label="开户行" prop="opening_bank">
                    <el-input placeholder="请输入开户行" size="small" v-model="ruleForm.opening_bank"></el-input>
                </el-form-item>
                <div class="input-mobile">
                    <el-form-item label="预留电话" prop="phone">
                        <el-input placeholder="请输入预留电话" size="small" v-model="ruleForm.phone">
                            <div slot="prefix" v-if="country_code.length>0">
                                <el-dropdown @command="chooseCountryCode">
                                    <span class="pl-4">
                                        {{country_code[current_code].name}}
                                        <i class="el-icon-arrow-down el-icon--right"></i>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item :command="index" :key="index" v-for="(item,index) in country_code">{{item.name}}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </el-input>
                    </el-form-item>
                </div>
                <el-form-item label="验证码" prop="code">
                    <el-input placeholder="请输入验证码" size="small" v-model="ruleForm.code">
                        <el-button :disabled="count_down>0" :style="buttonStyle" @click="sendSms" class="code-button" round size="mini" slot="suffix" type="info">{{button_text}}</el-button>
                    </el-input>
                </el-form-item>

                <div class="mt-40 last-button ml-100">
                    <el-button @click="visible=false" size="middle">取消</el-button>
                    <el-button :loading="loading" @click="submit" class="done" size="middle">保存</el-button>
                </div>
            </el-form>
        </div>
    </el-dialog>
</template>

<script>
import { getStorage, setStorage } from '@/utils/storage'
export default {
    data() {
        return {
            visible: false,
            ruleForm: {
                bank_code: null,
                card_number: '',
                opening_bank: '',
                phone: null,
                code: '',
                default: 1,
            },
            rules: {
                card_number: [{ required: true, message: '请输入银行卡号', trigger: 'blur' }],
                opening_bank: [{ required: true, message: '请输入请开户行', trigger: 'blur' }],
                phone: [{ required: true, message: '请输入银行预留电话', trigger: 'blur' }],
                bank_code: [{ required: true, message: '请选择所属银行', trigger: 'change' }],
                code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
            },
            banks: [],
            my_cert: {},
            count_down: 0,
            current_code: 0,
            country_code: [],
            loading: false,
        }
    },
    mounted() {
        this.getBanks()
        this.getMycert()
        this.getCountryCode()
        this.count_down = getStorage('count_down') ? getStorage('count_down') : 0
        if (this.count_down > 0) {
            this.startCountDown()
        }
    },
    computed: {
        user_info() {
            return this.$store.state.user.user
        },
        button_text() {
            if (this.count_down > 0) {
                return this.count_down + '秒后重新获取'
            } else {
                return '获取验证码'
            }
        },
        buttonStyle() {
            if (this.count_down > 0) {
                return 'background: none !important;color: #999 !important;'
            } else {
                return 'background: none !important;color: #ff1c6d !important;'
            }
        },
    },
    methods: {
        handleClose() {},
        submit() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.loading = true
                    let param = {
                        country_code: this.country_code[this.current_code].code,
                        ...this.ruleForm,
                    }
                    this.$request
                        .post('/user/bank/create', param)
                        .then((res) => {
                            this.$message.success('添加成功')
                            this.$emit('refresh')
                            this.$nextTick(() => {
                                this.visible = false
                            })
                        })
                        .catch((error) => {})
                        .finally((res) => {
                            this.loading = false
                        })
                }
            })
        },
        getCountryCode() {
            this.$request.get('/config/country_code').then((res) => {
                res.forEach((item) => {
                    this.country_code.push({
                        code: item.code,
                        name: '+' + item.code,
                    })
                })
            })
        },
        chooseCountryCode(value) {
            this.current_code = value
        },
        getBanks() {
            this.$request
                .get('/bank/index')
                .then((res) => {
                    this.banks = res
                })
                .catch((error) => {})
        },
        sendSms() {
            let param = {
                country_code: this.country_code[this.current_code].code,
            }
            if (!this.ruleForm.phone) {
                this.$message.error('请输入手机号码')
                return false
            }
            param.mobile = this.ruleForm.phone
            this.$request.post('/auth/send_sms', param).then((res) => {
                if (this.count_down <= 0) {
                    this.count_down = 60
                }
                this.startCountDown()
            })
            // if (this.count_down <= 0) {
            //     this.count_down = 60
            // }
            // this.startCountDown()
        },
        startCountDown() {
            const timer = setInterval(() => {
                this.count_down--
                setStorage('count_down', this.count_down, this.count_down)
                if (this.count_down <= 0) {
                    clearInterval(timer)
                }
            }, 1000)
        },
        getMycert() {
            this.$request.get('/auth/my_cert').then((res) => {
                this.my_cert = res
            })
        },
        submitForm() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    alert('submit!')
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__header {
    padding: 0;
}
.last-button button {
    width: 140px;
}
.done {
    background: #ff1c6d;
    color: #fff;
}
/deep/.el-form-item {
    margin-bottom: 12px;
}
/deep/.el-select--small {
    width: 100%;
}
/deep/.code-button {
    border: none !important;
}
/deep/.input-mobile input {
    text-indent: 40px !important;
}
</style>